<template>
  <div class="learingIndexPlay">
    <div class="vidPlayBox">
      <video id="courseVid" controls="" width="100%"  x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto">your browser does not support the video tag</video>
      <!--<i v-if="backSub" @click.stop="goBack()" class="icon-plab-back"></i>-->
    </div>
    <div class="title"><span>章节</span></div>
    <!--课程大纲-->
    <div class="courseItem">
      <div class="tit">课程大纲</div>
      <ul>第一章：MVC分层
        <li class="select"><span>视频</span>PHP学习 <a>试学</a></li>
        <li class="select"><span>视频</span>PHP学习 <a>试学</a></li>
      </ul>
       <ul>第二章：数据验证
        <li class="select"><span>视频</span>PHP学习</li>
        <li class="select"><span>视频</span>PHP学习</li>
        <li class="select"><span>视频</span>PHP学习</li>
        <li class="select"><span>视频</span>PHP学习</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'learingIndexPlay',
    data () {
      return {
        select: 1,       // 选择要播放的视频
        videoUrl: '',    // 视频连接
        courseItem: '',  // 课程大纲
        isBuy: 0,    // 是否购买课程
        backSub:true
      }
    },

  }
</script>

<style lang="scss">
  @import "../assets/baseScss";
  .learingIndexPlay{
    text-align: center;
    .vidPlayBox{
      position: relative;
      i{
        position: absolute;
        left: 20px;
        top:20px;
        font-size: 30px;
        color:rgba(255, 255, 255, 0.6)
      };
    }
    .title{
      box-shadow: 0px 3px 5px $cl5;
      background: $cl1;
      text-align: left;
      height: 40px;
      line-height: 40px;
      padding-left: 30px;
      font-size: 18px;
      position: relative;
      top:-7px;
      span{
        display: inline-block;
        height: 38px;
        padding: 0 10px;
        color:$cl0;
        border-bottom: solid 2px $cl0;
      }
    }
    .courseItem{
      padding:10px;
      margin: 10px 0;
      font-size: 12px;
      line-height: 28px;
      color:$cl6;
      text-align: left;
      .tit{
        font-size: 14px;
        color: $cl3;
      }
      .act{
        color:$cl0;
        span{
          border-color: $cl0;
        }
      }
      ul{
        color:$cl3;
        padding-left: 10px;
        li{
          color:$cl6;
          font-size: 12px;
          padding-left: 20px;
          span{
            font-size: 10px;
            padding:0px 2px;
            margin-right: 3px;
            border:solid 1px $cl6
          }
          a{
            position: absolute;
            right: 20px;
            color:$cl0;
          }
        }
      }
      ul:before{
        content: ' ● ';
        font-size: 20px;
        color:$cl4;
        position: relative;
        top:2px;
      }
      li:before{
        content: ' ';
        display: inline-block;
        position: absolute;
        left: 25px;
        color:$cl7;
        width: 18px;
        height: 30px;
        border-left: solid 1px $cl4;
      }
    }
  }
</style>
